<template>
    <div id="index">
        <!--第一行-->
        <div class="header">
            <img style="width:100%;height:949px;" src="https://digitalize.bj.bcebos.com/bg@2x.png">
            <div class="headTitle">
               <p style="font-size:75px;color:#fff"> 小微企业安全智慧监管场景应用 (码上安全)</p>
            </div>
        </div>
        <!-- <el-row class="row" :gutter="20" style="height: 500px">
            <el-col :span="12">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <div class="dot"></div>
                        <span>鄞州区接入企业统计</span>
                    </div>
                    <div>
                        <el-row>
                            <el-col :span="16">
                                <img style="width: 459px" :src="require('@/assets/image/map@2x.png')" alt="">
                            </el-col>
                            <el-col :span="8">
                                <div class="top">
                                    <div>接入企业总数 27268</div>
                                    <div>营业企业数 21569</div>
                                    <div>停业企业数 993</div>
                                    <div>注销企业数 1080</div>
                                    <div>归档企业数 3626</div>
                                </div>
                                <div class="top down">
                                    <div>行业类型统计</div>
                                    <div>工业企业 683</div>
                                    <div>沿街商铺 24857</div>
                                    <div>写字楼 1728</div>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="12" style="height: 100%; box-sizing: border-box">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <div class="dot"></div>
                        <span>各镇街接入企业数</span>
                    </div>
                    <div>
                        <div id="chart" ref="chart" style="width:100%;height:400px"></div>
                    </div>
                </el-card>
            </el-col>
        </el-row> -->

        <!--场景介绍-->
        <div>
            <div class="box-title" style="margin-top:80px">
                场景介绍
            </div>
            <div class="title-img">
                <img style="width:360px;height:15px" src="https://digitalize.bj.bcebos.com/title01@2x.png">
            </div>
            <div class="title-icon">
                <img style="width:99px;height:250px" src="https://digitalize.bj.bcebos.com/icon@2x.png">
            </div>      
            <div  class="box-2-name">
                <div style="display:flex">
                    <div class="box-2-content">牵头单位：</div>
                    区应急管理局
                </div>
            </div>

            <div  class="box-2-name">
                <div style="display:flex">
                    <div class="box-2-content">协同单位：</div>
                    区消防救援大队、区综合行政执法局、区公安分局、区市场监督管理局、区卫生健康局、区商务局
                </div>
            </div>

            <div  class="box-2-name">
                <div style="display:flex">
                    <div class="box-2-content">场景简介：</div>
                    小微企业安全智慧监管场景围绕沿街店铺、家庭小作坊等小微企业的基层安全治理，着力生产安全、消防安全、燃气安全、职业健康安全、食品安全等其他安全，通过打造一铺一码一档案，建立专属安全档案，明确安全生产检查清单和要求，结合企业日常自查、网格定期巡查、监管部门不定期督查情况，形成问题清单同步分流转至相关部门进行问题整改督导、复核、归档，形成隐患整改闭环协同工作链条。同时，实行安全生产积分管理制，明确赋分标准，实行“安全生产红黑榜”，实现沿街店铺安全生产“五更佳”目标：一是入库贴码全覆盖、安全底数更清晰，二是细化条款明角色、责任分工更具体，三是点单对账强监督、巡查执法更精准，四是热点事件速掌握，宣教培训更直接，五是各方力量齐调动、多元参与更广泛。
                </div>
            </div>

            <div  class="box-2-name">
                <div style="display:flex">
                    <div class="box-2-content">治理端使用对象：</div>
                    市、县、乡镇、社区各级牵头，协同部门工作人员及网格员
                </div>
            </div>

            <div  class="box-2-name">
                <div style="display:flex">
                    <div class="box-2-content">服务端使用对象：</div>
                    小微企业安全负责人及员工、群众
                </div>
            </div>
            <div class="link-sp">
                <p class="link-word" @click="dialogVisible = true">视频介绍 ></p>
                <p class="link-word" style="margin-left:50px" @click="gotoJS()">驾驶舱 ></p>
            </div>
            <div v-if="dialogVisible">
            <el-dialog
                :visible.sync="dialogVisible"
                width="60%"
                height="60%"
                top="8vh"
                :before-close="handleClose">
                <video src="https://digitalize.cdn.bcebos.com/%E5%AE%81%E6%B3%A2%E5%B8%82%E6%8E%A8%E5%B9%BF%E7%8E%B0%E5%9C%BA%E4%BC%9A%E8%A7%86%E9%A2%91.mp4" controls="controls" style="width:100%;height:100%"></video>
            </el-dialog>
            </div>
        </div>

        
        <!-- <el-row :gutter="20" class="row row-two">
            <el-col :span="12" class="left">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <div class="dot"></div>
                        <span>检查与隐患整改进度</span>
                    </div>
                    <div>
                        <div style="display: flex;justify-content: center">
                            <div style="height: 260px">
                                <div id="row2Left" style="width: 300px;height: 200px;margin-right: 100px"></div>
                            </div>
                            <div>
                                <div id="row2LeftRight" style="width: 300px;height: 200px"></div>
                            </div>
                        </div>
                        <div class="bottom">
                            <div class="box" style="width: 275px">
                                <div>累计发现隐患个数</div>
                                <div>已发现 <span style="color: #1992FF">40643</span> 个隐患</div>
                                <el-progress :text-inside="false" :stroke-width="10" :percentage="70"></el-progress>
                            </div>
                            <div class="box" style="width: 275px">
                                <div>累计整改隐患个数</div>
                                <div>已发现 <span style="color: #46C00B">30936</span> 个隐患</div>
                                <el-progress :text-inside="false"  status="success" :stroke-width="10" :percentage="70"></el-progress>
                            </div>
                            <div class="box" style="width: 275px">
                                <div>现存隐患个数</div>
                                <div>已发现 <span style="color: #F8773C">9709</span> 个隐患</div>
                                <el-progress :text-inside="false" color="#F8773C" :stroke-width="10" :percentage="70"></el-progress>
                            </div>
                        </div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="12" class="right">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <div class="dot"></div>
                        <span>现有隐患统计</span>
                    </div>
                    <div class="content">
                        <div class="con-left">
                            <div style="width: 300px;box-sizing: border-box;padding: 20px 40px 20px 20px;height: 100%">
                                <p style="color: #333333;font-size: 22px;margin-bottom: 40px">隐患等级</p>
                                <span v-for="(item,index) in row2Data.row2RightLeftRank" :key="index" style="display: flex;align-items: center;justify-content:space-between;margin-bottom: 20px">
                                    <span style="display: flex;align-items: center">
                                        <span :style="{background: row2Data.row2RightLeftRankColor[item.label]}" style="display: inline-block;width: 30px;height: 30px;border-radius: 50%;background-color: #FF6364;display: flex;align-items: center;justify-content: center;color: #fff">{{item.label}}</span>
                                        <span style="padding-left: 20px">级隐患</span>
                                    </span>
                                    <span :style="{color: row2Data.row2RightLeftRankColor[item.label]}" style="font-size: 26px;">
                                        <span>{{item.value}}</span>
                                        <span>个</span>
                                    </span>
                                </span>
                            </div>
                        </div>
                        <div class="con-right" style="border: 1px solid #ccc">
                            <div style="padding: 20px">
                                <div style="color: #333333;font-size: 22px;margin-bottom: 40px">隐患类型</div>
                                <div id="row2Right" style="width: 100%;height: 200px"></div>
                            </div>
                            <div style="display: flex;padding: 10px;justify-content: space-between;margin-bottom: 40px">
                                <div v-for="(item,index) in row2Data.row2RightBottomList" :key="index" style="text-align: center">
                                    <div style="display: flex;align-items: center">
                                        <div style="width: 8px;height: 8px;background-color: #F8773C;border-radius: 50%"></div>
                                        <div style="margin-left: 10px">{{item.label}}</div>
                                    </div>
                                    <div style="font-size: 22px;color: #F8773C">{{item.value}}个</div>
                                </div>
                            </div>
                        </div>
                    </div>

                </el-card>
            </el-col>
        </el-row> -->

        <!--第三行-->
        <!-- 核心指标 -->
        <div>
             <div class="box-title" style="margin-top:150px">
                核心指标
            </div>
            <div class="title-img">
                <img style="width:360px;height:15px" src="https://digitalize.bj.bcebos.com/title02@2x.png">
            </div> 
            <div style="padding:50px 150px 0 150px" >
                <el-row :gutter="20">
                    <el-col :span="8" >
                        <div class="box-3-card-tan" @click="aa">
                            <div class="box-3-card" style="background-image: linear-gradient(270deg, #34B2FD 0%, #1992FF 100%);border-radius:8px">
                                <div style="position:absolute;top:12%;">
                                    <p style="font-size:40px;color: #fff;">安全监管企业数</p>
                                    <p style="font-size:60px;color: #fff;line-height:100px">28447</p>
                                </div>
                            </div>
                        </div>
                        <div v-if="card1">
                            <el-dialog
                                :visible.sync="card1"
                                width="60%"
                                height="60%"
                                top="8vh"
                                class="kk"
                                border-radius="20px"
                                :show-close=false
                                :before-close="handleClose">
                                <div>
                                    <div style="display:flex;position:absolute;top:20px;">
                                        <div style="width:5px;height:28px;background-color:#1992FF;"></div>
                                        <div style="font-size:28px;margin-left:20px;line-height:28px;color:black">安全监管企业统计</div>
                                    </div>
                                    <div style="width:100%;height:1px;background-color:#CCCCCC;top:70px;position:absolute;left:0"></div>
                                    <div style="margin-top:40px;font-size:28px;color:black;margin-left:25px">
                                        安全监管企业数 <span style="font-size:50px;color:#1992FF;margin-left:5px"> {{tan1.ownerTotal}}</span>
                                    </div>
                                    <el-row :gutter="40" style="padding-left:2.5%;padding-right:2.5%;margin-top:1%">
                                        <el-col span="10">
                                            <table  cellspacing="0" style="border:1px solid #1992FF;border-radius:4px;width:100%"> 
                                                <tr  style="background:#1992FF;">
                                                    <td colspan="2" style="text-align:center;padding:3% 0;color:#fff;">接入企业总数 {{tan1.ownerTotal}}</td>
                                                    <!-- <td></td> -->
                                                </tr>
                                                <tr>
                                                    <td style="text-align: center;padding:3% 0">营业企业数 {{tan1.doBusinessTotal}}</td>
                                                    <td style="background: #D6EDFF;text-align: center;padding:3% 0">停业企业数 {{tan1.stopDoingBusiness}}</td>
                                                </tr>
                                                <tr>
                                                    <td style="background: #D6EDFF;text-align: center;padding:3% 0">注销企业数 {{tan1.closeBusiness}}</td>
                                                    <td style="text-align: center;padding:3% 0">归档企业数 {{tan1.placeOnFileBusiness}}</td>
                                                </tr>
                                            </table>
                                            <table  cellspacing="0" style="border:1px solid #1992FF;border-radius:4px;width:100%;margin-top:10%"> 
                                                <tr  style="background:#1992FF;">
                                                    <td colspan="2" style="text-align:center;padding:3% 0;color:#fff;">行业类型统计</td>
                                                    <!-- <td></td> -->
                                                </tr>
                                                <tr>
                                                    <td style="text-align: center;padding:3% 0">沿街商铺 {{tan2[5].count}}</td>
                                                    <td style="background: #D6EDFF;text-align: center;padding:3% 0 ">小餐饮 {{tan2[4].count}}</td>
                                                </tr>
                                                <tr>
                                                    <td style="background: #D6EDFF;text-align: center;padding:3% 0">写字楼 {{tan2[1].count}}</td>
                                                    <td style="text-align: center;padding:3% 0">商贸企业 {{tan2[0].count}}</td>
                                                </tr>
                                                <tr>
                                                    <td style="text-align: center;padding:3% 0">工业企业 {{tan2[3].count}}</td>
                                                    <td style="background: #D6EDFF;text-align: center;padding:3% 0">公共娱乐场所 {{tan2[2].count}}</td>
                                                </tr>
                                            </table>
                                        </el-col>

                                        <el-col span="14" style="border:1px solid #CCCCCC;">
                                            
                                            <div>
                                                <div id="chart" ref="chart" style="width:100%;height:356px"></div>
                                            </div>
                                        </el-col>
                                    </el-row>
                                </div>  
                            </el-dialog>
                        </div>
                    </el-col>
                    <el-col :span="16">
                        <div style="width:100%;padding:40px 60px;box-sizing:border-box;position:relative;height:180px;cursor: pointer;" @click="bb()">
                            <img :src="require('@/assets/image/bg_01@2x.png')" style="width:100%;position:absolute;left:0;top:0;height:100%;border-radius:8px">
                            <div style="position:absolute;top:12%">
                                <p style="font-size:40px;color: #fff;">企业自查率</p>
                                <p style="font-size:60px;color: #fff;margin-top:5%">{{check.answerRate}}%</p>
                            </div>
                            <div style="position:absolute;top:12%;left:45%">
                                <p style="font-size:40px;color: #fff;">企业巡查率</p>
                                <p style="font-size:60px;color: #fff;margin-top:5%">{{check.checkRate}}%</p>
                            </div>
                        </div>
                        <div v-if="card2">
                            <el-dialog
                                :visible.sync="card2"
                                width="60%"
                                height="60%"
                                top="8vh"
                                class="kk"
                                :show-close=false
                                :before-close="handleClose">
                                <div>
                                    <div style="display:flex;position:absolute;top:20px;">
                                        <div style="width:5px;height:28px;background-color:#1992FF;"></div>
                                        <div style="font-size:28px;margin-left:20px;line-height:28px;color:black">企业自查巡查率统计</div>
                                    </div>
                                    <div style="width:100%;height:1px;background-color:#CCCCCC;top:70px;position:absolute;left:0"></div>
                                    <div style="display:flex">
                                        <div></div>
                                    </div>
                                    <el-row :gutter="40" style="padding-left:20%;padding-right:20%;margin-top:5%;padding-bottom:8%">
                                        <el-col :span="12">
                                            <div style="height: 220px">
                                                <div id="row2Left" style="width: 300px;height: 200px;margin-right: 100px"></div>
                                            </div>
                                            <div style="font-size:28px;text-align: center;color:#000">
                                                企业巡查率 <span style="color:#1992FF;font-size:50px">{{check.checkRate}}%</span>
                                            </div>
                                            <div style="font-size:20px;text-align: center;">
                                                本月已巡查家数  <span style="font-size:30px">{{check.checkCount}}</span>
                                            </div>
                                            <div style="font-size:20px;text-align: center;">
                                                累积巡查次数   <span style="font-size:30px">{{check.checkTotal}}</span>
                                            </div>
                                        </el-col>
                                        <el-col :span="12" >
                                            <div>
                                                <div id="row2LeftRight" style="width: 300px;height: 200px"></div>
                                            </div>
                                            <div style="font-size:28px;text-align: center;color:#000;margin-top:20px">
                                                企业自查率 <span style="color:#46C00B;font-size:50px">{{check.answerRate}}%</span>
                                            </div>
                                            <div style="font-size:20px;text-align: center;">
                                                本月已自查家数  <span style="font-size:30px">{{check.answerCount}}</span>
                                            </div>
                                            <div style="font-size:20px;text-align: center;">
                                                累积自查次数   <span style="font-size:30px">{{check.answerTotal}}</span>
                                            </div>
                                        </el-col>
                                    </el-row>
                                </div>  
                            </el-dialog>
                        </div>
                    </el-col>
                </el-row>
                <el-row :gutter="20" style="margin-top:30px">
                    <el-col :span="8">
                        <div class="box-3-card" @click="cc()">
                            <img :src="require('@/assets/image/bg_02@2x.png')" class="box-3-card-img">
                             <div style="position:absolute;top:12%">
                                <p style="font-size:40px;color: #fff;">累计发现隐患数</p>
                                <p style="font-size:60px;color: #fff;margin-top:5%">{{hexin.riskTotal}}</p>
                            </div>
                        </div>
                        <div v-if="card3">
                            <el-dialog
                                :visible.sync="card3"
                                width="60%"
                                height="60%"
                                top="8vh"
                                class="kk"
                                :show-close=false
                                :before-close="handleClose">
                                <div>
                                    <div style="display:flex;position:absolute;top:20px;">
                                        <div style="width:5px;height:28px;background-color:#1992FF;"></div>
                                        <div style="font-size:28px;margin-left:20px;line-height:28px;color:black">累积发现隐患统计</div>
                                    </div>
                                    <div style="width:100%;height:1px;background-color:#CCCCCC;top:70px;position:absolute;left:0"></div>
                                    <div style="margin-top:40px;font-size:28px;color:black;margin-left:25px">
                                        累积发现隐患数 <span style="font-size:50px;color:#1992FF;margin-left:5px"> {{hexin.riskTotal}}</span>
                                    </div>
                                    <div style="display:flex">
                                        <div></div>
                                    </div>
                                    <div class="content" >
                                        <div class="con-left">
                                            <div style="width: 300px;box-sizing: border-box;padding: 20px 40px 20px 20px;height: 100%">
                                                <p style="color: #333333;font-size: 22px;margin-bottom: 40px">隐患等级</p>
                                                <span v-for="(item,index) in level" :key="index" style="display: flex;align-items: center;justify-content:space-between;margin-bottom: 20px">
                                                    <span style="display: flex;align-items: center">
                                                        <span :style="{background: row2Data.row2RightLeftRankColor[item.level]}" style="display: inline-block;width: 30px;height: 30px;border-radius: 50%;background-color: #FF6364;display: flex;align-items: center;justify-content: center;color: #fff">{{item.level}}</span>
                                                        <span style="padding-left: 20px">级隐患</span>
                                                    </span>
                                                    <span :style="{color: row2Data.row2RightLeftRankColor[item.level]}" style="font-size: 26px;">
                                                        <span>{{item.total}}</span>
                                                        <span>个</span>
                                                    </span>
                                                </span>
                                            </div>
                                        </div>
                                        <div class="con-right" style="border: 1px solid #ccc">
                                            <div style="padding: 20px 8px;display:flex">
                                                <div style="color: #333333;font-size: 22px;box-sizing:border-box;flex-shrink:0">隐患类型</div>
                                                <div id="row2Right" ref="row2Right" style="width: 100%;height: 200px"></div>
                                            </div>
                                            <div style="display: flex;padding: 10px;justify-content: space-between;margin-bottom: 40px">
                                                <div v-for="(item,index) in row2Data.row2RightBottomList" :key="index" style="text-align: center">
                                                    <div style="display: flex;align-items: center">
                                                        <div style="width: 8px;height: 8px;background-color: #F8773C;border-radius: 50%"></div>
                                                        <div style="margin-left: 10px">{{item.label}}</div>
                                                    </div>
                                                    <div style="font-size: 22px;color: #F8773C">{{item.value}}个</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>  
                            </el-dialog>
                        </div>
                    </el-col>
                    <el-col :span="8">
                         <div class="box-3-card" @click="dd()">
                            <img :src="require('@/assets/image/bg_03@2x.png')" class="box-3-card-img">
                             <div style="position:absolute;top:12%">
                                <p style="font-size:40px;color: #fff;">累计整改隐患数</p>
                                <p style="font-size:60px;color: #fff;margin-top:5%">{{risk.repairTotal}}</p>
                            </div>
                        </div>
                        <div v-if="card4">
                            <el-dialog
                                :visible.sync="card4"
                                width="60%"
                                height="60%"
                                top="8vh"
                                class="kk"
                                :show-close=false
                                :before-close="handleClose">
                                <div>
                                    <div style="display:flex;position:absolute;top:20px;">
                                        <div style="width:5px;height:28px;background-color:#1992FF;"></div>
                                        <div style="font-size:28px;margin-left:20px;line-height:28px;color:black">累积整改隐患统计</div>
                                    </div>
                                    <div style="width:100%;height:1px;background-color:#CCCCCC;top:70px;position:absolute;left:0"></div>
                                    <div style="margin-top:40px;font-size:28px;color:black;margin-left:25px">
                                        累积整改隐患数 <span style="font-size:50px;color:#1992FF;margin-left:5px"> {{risk.repairTotal}}</span>
                                    </div>
                                    <div class="bottom" style="margin-top:8%;margin-bottom:14%">
                                        <div class="box" style="width: 275px">
                                            <div>累计发现隐患个数</div>
                                            <div>已发现 <span style="color: #1992FF">{{risk.riskTotal}}</span> 个隐患</div>
                                            <el-progress :text-inside="false" :stroke-width="10" :percentage="100"></el-progress>
                                        </div>
                                        <div class="box" style="width: 275px">
                                            <div>累计整改隐患个数</div>
                                            <div>已发现 <span style="color: #46C00B">{{risk.repairTotal}}</span> 个隐患</div>
                                            <el-progress :text-inside="false"  status="success" :stroke-width="10" :percentage="70"></el-progress>
                                        </div>
                                        <div class="box" style="width: 275px">
                                            <div>现存隐患个数</div>
                                            <div>已发现 <span style="color: #F8773C">{{risk.existingRiskCount}}</span> 个隐患</div>
                                            <el-progress :text-inside="false" color="#F8773C" :stroke-width="10" :percentage="20"></el-progress>
                                        </div>
                                    </div>
                                </div>  
                            </el-dialog>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="box-3-card" style="background-image:linear-gradient(270deg, #34B2FD 0%, #1992FF 100%);border-radius:8px" @click="ee()">
                             <div style="position:absolute;top:12%;">
                                <p style="font-size:40px;color: #fff;">安全学习人员数</p>
                                <p style="font-size:60px;color: #fff;margin-top:5%">{{hexin.studentCount}}</p>
                            </div>
                        </div>
                        <div v-if="card5">
                            <el-dialog
                                :visible.sync="card5"
                                width="60%"
                                height="60%"
                                top="8vh"
                                class="kk"
                                :show-close=false
                                :before-close="handleClose">
                                <div>
                                    <div style="display:flex;position:absolute;top:20px;">
                                        <div style="width:5px;height:28px;background-color:#1992FF;"></div>
                                        <div style="font-size:28px;margin-left:20px;line-height:28px;color:black">安全学习人员数统计</div>
                                    </div>
                                    <div style="width:100%;height:1px;background-color:#CCCCCC;top:70px;position:absolute;left:0"></div>
                                    <div style="margin-top:40px;font-size:28px;color:black;margin-left:25px">
                                        安全学习人员数 <span style="font-size:50px;color:#1992FF;margin-left:5px"> {{hexin.studentCount}}</span>
                                    </div>
                                    <table cellspacing="0" border="1" style="width:100%;border-radius:4px;margin-top:3%" bordercolor="#CCc">
                                        
                                        <tr>
                                            <td class="text-line" style="padding:13px 0">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
                                            <td class="text-line" style="padding:13px 0">推送学习(人)</td>
                                            <td class="text-line" style="padding:13px 0">自主学习(人)</td>
                                            <td class="text-line" style="padding:13px 0">宣教覆盖率</td>
                                            <td class="text-line" style="padding:13px 0">学习时长(分钟)</td>
                                        </tr>
                                        <tr>
                                            <th style="padding:13px 0;font-size:18px;color:#333">普法栏目</th>
                                            <th class="text-colors" style="padding:13px 0">28,012</th>
                                            <th class="text-colors" style="padding:13px 0">28,012</th>
                                            <th class="text-colors" style="padding:13px 0">83.09%</th>
                                            <th class="text-colors" style="padding:13px 0">28,012</th>
                                        </tr>
                                        <tr>
                                            <th style="padding:13px 0;font-size:18px;color:#333">基础学习</th>
                                            <th class="text-colors" style="padding:13px 0">28,012</th>
                                            <th class="text-colors" style="padding:13px 0">28,012</th>
                                            <th class="text-colors" style="padding:13px 0">83.09%</th>
                                            <th class="text-colors" style="padding:13px 0">28,012</th>
                                        </tr>
                                    </table>
                                    <el-row :gutter="20">
                                        <el-col :span="12">
                                            <div style="border: 1px solid #ccc;border-radius: 5px;margin-top: 20px;">
                                                <div id="row4Left1" style="min-width: 200px;height:300px;"></div>
                                            </div>
                                        </el-col>
                                        <el-col :span="12">
                                            <div style="border: 1px solid #ccc;border-radius: 5px;margin-top: 20px;">
                                                <div id="row4Left2" style="min-width: 200px;height:300px;"></div>
                                            </div>
                                        </el-col>
                                    </el-row>
                                </div>  
                            </el-dialog>
                        </div>
                    </el-col>
                </el-row>
            </div>
            <!-- <div>
                <div class="dot"></div>
            </div>
            <el-row :gutter="20" style="padding:50px 150px">
                <el-col :span="12"></el-col>
                <el-col :span="12">123</el-col>
            </el-row>  -->
        </div>
        
        <!-- 应用成效 -->
        <div>
            <div class="box-title" style="margin-top:150px">
                应用成效
            </div>
            <div class="title-img">
                <img style="width:360px;height:15px" src="https://digitalize.bj.bcebos.com/title03@2x.png">
            </div>
            <div style="padding:50px 150px 0 150px">
                <img src="https://digitalize.bj.bcebos.com/应用成效@2x.png" style="width:100%;height:590px">
            </div>
        </div>

        <!-- 流程再造 -->
        <div>
            <div class="box-title" style="margin-top:150px">
                流程再造
            </div>
            <div class="title-img">
                <img style="width:360px;height:15px" src="https://digitalize.bj.bcebos.com/title04@2x.png">
            </div>
            <div style="padding:50px 0 0 0">
                <img src="https://digitalize.bj.bcebos.com/流程再造@2x.png" style="width:100%;height:870px">
            </div>
        </div>

        <!-- 多跨协同 -->
        <div>
            <div class="box-title" style="margin-top:150px">
                多跨协同
            </div>
            <div class="title-img">
                <img style="width:360px;height:15px" src="https://digitalize.bj.bcebos.com/title05@2x.png">
            </div>
            <div class="box-duo-title-small">
                区消防救援大队、区综合行政执法局、区公安分局、区市场监督管理局、区卫生健康局、区商务局
            </div>
            <el-row :gutter="24" style="padding:50px 150px">
                <el-col :span="9" >
                    <div class="box-duo-card-left">
                        <div class="box-duo-card-left-dot"></div>
                        <div class="box-duo-card-left-font1">
                             <p style="font-weight:500;flex-shrink: 0;">跨层级：</p>
                             <p>市、区、街道/乡镇、社区、网格</p>
                        </div>
                       
                    </div>
                    <div class="box-duo-card-left" style="height:222px ;margin-top:20px">
                        <div class="box-duo-card-left-dot" style="margin-top:-56px;background-color:#73A0FA"></div>
                        <div class="box-duo-card-left-font2">
                             <p><span style="font-weight:500;flex-shrink: 0;">跨部门：</span>区应急管理局、区消防救援大队、区综合行政执法局、区公安分局、区市场监督管理局、区卫生健康局、区商务局</p>
                        </div>
                    </div>
                    <div class="box-duo-card-left" style="margin-top:20px">
                        <div class="box-duo-card-left-dot"></div>
                        <div class="box-duo-card-left-font3">
                             <p style="font-weight:500;flex-shrink: 0;">跨领域：</p>
                             <p>数字政府、数字社会、数字法治</p>
                        </div>
                    </div>
                </el-col>
                <el-col :span="6" style="text-align: center">
                    <img class="box-duo-title-pic"  src="https://digitalize.bj.bcebos.com/pic@2x.png">
                </el-col>
                <el-col :span="9">
                    <div class="box-duo-card-right">
                        <div class="box-duo-card-left-dot" style="margin-top:-205px"></div>
                        <div class="box-duo-card-left-font4">
                             <p><span style="font-weight:500;flex-shrink: 0;">跨业务：</span>小微企业安全智慧监管场景围绕沿街店铺、家庭小作坊等小微企业的基层安全治理，着力生产安全、消防安全、燃气安全、职业健康安全、食品安全等其他安全，通过打造一铺一码一档案，建立专属安全档案，明确安全生产检查清单和要求，结合企业日常自查、网格定期巡查、监管部门不定期督查情况，形成问题清单同步分流转至相关部门进行问题整改督导、复核、归档，形成隐患整改闭环协同工作链条。</p>
                        </div>
                    </div>
                    <div class="box-duo-card-left" style="height:82px ;margin-top:20px">
                        <div class="box-duo-card-left-dot" style="background-color:#73A0FA"></div>
                        <div class="box-duo-card-left-font5" >
                             <p><span style="font-weight:500;flex-shrink: 0;">跨系统：</span>基层治理四平台，基层一表通，问题处置平台</p>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>

        <!-- 应用场景 -->
        <div>
            <div class="box-title" style="margin-top:150px">
                应用场景
            </div>
            <div class="title-img">
                <img style="width:360px;height:15px" src="https://digitalize.bj.bcebos.com/title06@2x.png">
            </div>
            <div style="padding:50px 0 0 0">
                <img src="https://digitalize.bj.bcebos.com/应用场景@2x.png" style="width:100%;">
            </div>
        </div>

        <!-- 数据清单 -->
        <div>
            <div class="box-title" style="margin-top:150px">
                数据清单
            </div>
            <div class="title-img">
                <img style="width:360px;height:15px" src="https://digitalize.bj.bcebos.com/title07@2x.png">
            </div>
            <el-row :gutter="20" style="padding:50px 150px 0 150px;">
                <el-col :span="8">
                    <div  class="box-shuju-row1">
                        <div style="font-size:28px">小微企业企业安全自查记录</div>
                        <div style="font-size:40px;margin-top:7%">100条</div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="box-shuju-row1">
                        <div style="font-size:28px">小微企业隐患清单</div>
                        <div style="font-size:40px;margin-top:7%">100条</div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="box-shuju-row1">
                        <div style="font-size:28px">小微企业基础信息</div>
                        <div style="font-size:40px;margin-top:7%">100条</div>
                    </div>
                </el-col>
            </el-row>
            <el-row :gutter="20" style="padding:20px 150px 0 150px;">
                <el-col :span="8">
                    <div  class="box-shuju-row1">
                        <div style="font-size:28px">小微企业企业安全网格巡查记录</div>
                        <div style="font-size:40px;margin-top:7%">100条</div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="box-shuju-row1">
                        <div style="font-size:28px">小微企业安全积分</div>
                        <div style="font-size:40px;margin-top:7%">100条</div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="box-shuju-row1">
                        <div style="font-size:28px">小微企业安全指数</div>
                        <div style="font-size:40px;margin-top:7%">100条</div>
                    </div>
                </el-col>
            </el-row>
            <div>
                <div style="font-size:40px;line-height:40px;padding:80px 0 0 150px">
                    <img src="https://digitalize.bj.bcebos.com/icondot@2x.png" style="width:31px;height:31px;margin-top: 20px;">
                     隐患点分布
                </div>
                <div class="box-card">
                    <el-card >
                        <div style="display: flex;flex-wrap: wrap;justify-content: space-between">
                            <div v-for="(item,index) in row3Data" :key="index" class="content1">
                                <div>{{ item.label }}</div>
                                <div style="display: flex;justify-content: space-around;margin-top: 20px;text-align: center">
                                    <div>
                                        <div style="color: #1992FF;font-size: 18px">{{item.leftNum}}</div>
                                        <div style="color: #888888;margin-top: 10px">现存隐患个数</div>
                                    </div>
                                    <div>
                                        <div style="color: #1992FF;font-size: 18px">{{item.rightNum}}</div>
                                        <div style="color: #888888;margin-top: 10px">累计完成整改隐患个数</div>
                                    </div>
                                </div>
                                <el-progress :text-inside="false" :stroke-width="10" :percentage="70"></el-progress>
                            </div>
                        </div>
                    </el-card>
                </div>    
            </div>
        </div>

        <!-- 政策体系 -->
        <div>
            <div class="box-title" style="margin-top:150px">
                政策体系
            </div>
            <div class="title-img">
                <img style="width:360px;height:15px" src="https://digitalize.bj.bcebos.com/title08@2x.png">
            </div>
            <div class="box-8-tab">
                <div class="box-8-tab-left">
                    制度创新
                </div>
                <div class="box-8-tab-right" >
                    政策体系
                </div>
            </div>
            <div class="box-8-content">
                <div class="box-8-content1">1、出台<span class="box-8-link">《“码上安全”智慧监管平台日常应用工作规则》</span>（试行版），全面构建系统性的完备应用体系。</div>
                <div class="box-8-content2">2、制定<span class="box-8-link">《“码上安全”发现隐患分类分级分期整治闭环工作制度》</span>（试行版），对平台内的隐患进行分级分类分期管理，推动形成整改闭环。</div>
                <div class="box-8-content3">3、出台<span class="box-8-link">《小微企业安全积分管理制度》</span>（试行版），明确量化赋分标准，由镇街对平台企业进行积分制管理。</div>
            </div>
        </div>

        <!-- 应用推广 -->
        <div>
            <div class="box-title" style="margin-top:150px">
                应用推广
            </div>
            <div class="title-img">
                <img style="width:360px;height:15px" src="https://digitalize.bj.bcebos.com/title09@2x.png">
            </div>
            <el-row :gutter="140" class="box-9" style="margin-left:0;margin-right:0">
                <img src="https://digitalize.bj.bcebos.com/picbottom@2x.png" class="bottom-pic">
                <el-col :span="11"  style="position:absolute;left:150px;padding-right: 150px">
                    <img src="https://digitalize.bj.bcebos.com/picB@2x.png" class="box-9-left-pic">
                </el-col>
                <el-col :span="11" style="position:absolute;right:150px">
                    <div>
                        <div class="box-9-title1">
                            <img src="https://digitalize.bj.bcebos.com/icondot@2x.png" class="box-9-center-pic">
                            一地创新，全市共享
                        </div>
                        <div class="box-9-content1">自2020年5月起，鄞州区明楼街道初步探索沿街店铺“码上安全”创新监管模式，成效初显，同年10月份在鄞州区初步推广应用，并实现全覆盖，取得预期效果。2021年深入贯彻数字化改革精神，对“码上安全”应用进行迭代升级，完成多跨与共享的融合，于2021年5月27日在宁波市安委办牵头下举行宁波市全市试点推广发布会，实现全市57个镇街的覆盖应用。</div>
                        <div class="box-9-title2">
                            <img src="https://digitalize.bj.bcebos.com/icondot@2x.png" class="box-9-center-pic">
                            全国推广，多方认可
                         </div>
                        <div class="box-9-content2">小微企业安全智慧监管场景着力基层安全治理“人少事繁”问题，兼顾小微企业自身安全管理能力欠缺，意识薄弱，从企业自查、网格巡查、镇街督查、区县不定期抽查四个层级出发，发挥群众监督举报能力，从不同维度对企业安全进行画像生成，构建小微企业安全信用积分管理制度，进而形成安全底数更清晰、责任分工更具体、巡查执法更精准、宣教培训更直接、多元参与更广泛的安全治理模式。目前该应用已经在河北、江苏、山东等地进行试点推广，同时也得到了中国应急管理报、人民日报、浙江日报等多方的认可和报道。</div>
                    </div>
                   
                </el-col>
                <div>
                <div>  
                    <img src="https://digitalize.bj.bcebos.com/iconright@2x.png" style="position:absolute;right:0;width:181px;height:337px;top:160px">
                </div>  
                <!-- <img :src="require('@/assets/image/picbottom@2x.png')" class="bottom-pic"> -->
            </div>
            </el-row>
            
        </div>
        <div>
            
        </div>
        <!-- <el-row class="row row-three">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <div class="dot"></div>
                    <span>隐患点分布</span>
                </div>
                <div style="display: flex;flex-wrap: wrap;justify-content: space-between">
                    <div v-for="(item,index) in row3Data" :key="index" class="content">
                        <div>{{ item.label }}</div>
                        <div style="display: flex;justify-content: space-around;margin-top: 20px;text-align: center">
                            <div>
                                <div style="color: #1992FF;font-size: 18px">{{item.leftNum}}</div>
                                <div style="color: #888888;margin-top: 10px">现存隐患个数</div>
                            </div>
                            <div>
                                <div style="color: #1992FF;font-size: 18px">{{item.rightNum}}</div>
                                <div style="color: #888888;margin-top: 10px">累计完成整改隐患个数</div>
                            </div>
                        </div>
                        <el-progress :text-inside="false" :stroke-width="10" :percentage="70"></el-progress>
                    </div>
                </div>
            </el-card>
        </el-row>
        <el-row class="row row-four" style="height: 580px;box-sizing: border-box" :gutter="20">
            <el-col :span="12" style="height: 100%">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <div class="dot"></div>
                        <span>安全知识宣教</span>
                    </div>
                    <div class="content">
                        <el-table
                            :data="tableData" border :header-cell-style="{
                                color: '#333333',
                                fontSize: '16px'
                            }"
                            style="width: 100%">
                            <el-table-column
                                prop="name1"
                                label=""
                                align="center"
                                width="180">
                                <template slot-scope="scope">
                                    <div style="color: #333333;font-size: 18px">{{scope.row.name1}}</div>
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop="name2"
                                align="center"
                                label="推送学习(人)"
                                width="180">
                                    <template slot-scope="scope">
                                        <div style="color: #1992FF;font-size: 20px">{{scope.row.name2}}</div>
                                    </template>
                            </el-table-column>
                            <el-table-column
                                prop="name3"
                                align="center"
                                label="自主学习(人)">
                                <template slot-scope="scope">
                                    <div style="color: #1992FF;font-size: 20px">{{scope.row.name3}}</div>
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop="name4"
                                align="center"
                                label="学习视频数"
                                width="180">
                                <template slot-scope="scope">
                                    <div style="color: #1992FF;font-size: 20px">{{scope.row.name4}}</div>
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop="name5"
                                align="center"
                                label="学习时长(分钟)">
                                <template slot-scope="scope">
                                    <div style="color: #1992FF;font-size: 20px">{{scope.row.name5}}</div>
                                </template>
                            </el-table-column>
                        </el-table>
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <div style="border: 1px solid #ccc;border-radius: 5px;margin-top: 20px;">
                                    <div id="row4Left1" style="min-width: 200px;height:300px;"></div>
                                </div>
                            </el-col>
                            <el-col :span="12">
                                <div style="border: 1px solid #ccc;border-radius: 5px;margin-top: 20px;">
                                    <div id="row4Left2" style="min-width: 200px;height:300px;"></div>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="12" class="right-con" style="height: 580px">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <div class="dot"></div>
                        <span>用户画像统计</span>
                    </div>
                    <div>
                        <el-row :gutter="20">
                            <el-col :span="16">
                                <div style="border: 1px solid #ccc; height: 450px;box-sizing: border-box;padding: 20px">
                                    <el-row>
                                        <el-col :span="10">
                                            <div>
                                                <p>平均日活跃用户数 1096人</p>
                                                <div id="row4Right1" style="width:200px;height: 350px"></div>
                                            </div>
                                        </el-col>
                                        <el-col :span="14">
                                            <div>
                                                <p style="margin-bottom: 40px">近30天活跃用户数 32875</p>
                                                <el-table
                                                    :data="row4tableData"
                                                    style="width: 100%">
                                                    <el-table-column
                                                        prop="age"
                                                        label="年龄"
                                                        width="100">
                                                    </el-table-column>
                                                    <el-table-column
                                                        prop="num"
                                                        label="用户数"
                                                        width="100">
                                                    </el-table-column>
                                                    <el-table-column
                                                        prop="per"
                                                        label="占比">
                                                    </el-table-column>
                                                </el-table>
                                            </div>
                                        </el-col>
                                    </el-row>
                                </div>

                            </el-col>
                            <el-col :span="8">
                                <div style="border: 1px solid #ccc;height: 450px;box-sizing: border-box">
                                    <div id="row4Right2" style="width:200px;height: 200px;margin: 0 auto"></div>
                                    <div style="padding: 10px">
                                        <el-table
                                        :data="row4tableData2"
                                        style="width: 100%">
                                        <el-table-column
                                            prop="age"
                                            label="年龄"
                                            width="60"
                                            >
                                        </el-table-column>
                                        <el-table-column
                                            prop="num"
                                            width="80"
                                            label="用户数"
                                            >
                                        </el-table-column>
                                        <el-table-column
                                            prop="per"
                                            label="占比">
                                        </el-table-column>
                                    </el-table>
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </el-card>
            </el-col>
        </el-row> -->
    </div>
</template>

<script>
// import echarts from 'echarts'
import {task_dept_rank} from '@/api/index'
import {tan1_table2} from '@/api/index'
import {tan1_table3} from '@/api/index'
import {zicha_xuncha} from '@/api/index'
import {riskLevel} from '@/api/index'
import {hexin} from '@/api/index'
import {risk} from '@/api/index'
import {student} from '@/api/index'


export default {
    data(){
        return {
            card1:false,
            card2:false,
            card3:false,
            card4:false,
            card5:false,
            dialogVisible: false,
            row2Data: {
                row2RightLeftRank: [
                    {
                        label: 'A',
                        value: '370',
                    },{
                        label: 'B',
                        value: '2860',
                    },{
                        label: 'C',
                        value: '5663',
                    },{
                        label: 'D',
                        value: '831',
                    }
                ],
                row2RightLeftRankColor: {
                    'A': '#FF4D4F',
                    'B': '#F8773C',
                    'C': '#FFA940',
                    'D': '#1992FF'
                },
                row2RightBottomList: [
                    {
                        label: '生产安全',
                        value: '2670'
                    },
                    {
                        label: '消防安全',
                        value: '5414'
                    },
                    {
                        label: '燃气安全',
                        value: '525'
                    },
                    {
                        label: '食品安全',
                        value: '1053'
                    },
                    {
                        label: '其他安全',
                        value: '62'
                    },
                ],
            },
            row3Data: [
                {
                    label: '灭火器等未配备到位的',
                    leftNum: 3450,
                    rightNum: 2519,
                }, {
                    label: '消火通道堵塞的',
                    leftNum: 84,
                    rightNum: 626,
                },{
                    label: '违规住2人及以下未配齐安全四件套的',
                    leftNum: 488,
                    rightNum: 969,
                },{
                    label: '燃料未在专用空间存放的',
                    leftNum: 99,
                    rightNum: 216,
                }, {
                    label: '电线线路私接乱接或未套管的',
                    leftNum: 74,
                    rightNum: 1395,
                }, {
                    label: '未安装漏电保护装置或漏电保护装置不能正常工作的',
                    leftNum: 383,
                    rightNum: 1413,
                },{
                    label: '消毒柜无法正常使用',
                    leftNum: 7,
                    rightNum: 1,
                },{
                    label: '店铺内存在电瓶车充电且未配备智能安全充电器的',
                    leftNum: 108,
                    rightNum: 1097,
                },
            ],
            tableData: [
                {name1: '普法栏目',name2: '129',name3: '306',name4: '541',name5: '822'},
                {name1: '基础学习',name2: '322',name3: '864',name4: '1265',name5: '2373'},
            ],
            row4tableData: [
                {age: '30~39岁', num: '11496', per: '34.97%'},
                {age: '40~49岁', num: '8025', per: '24.41%'},
                {age: '50岁以上', num: '5302', per: '18.62%'},
                {age: '25~29岁', num: '4465', per: '13.58%'},
                {age: '18~24岁', num: '3310', per: '10.07%'},
                {age: '17岁以下', num: '277', per: '0.84%'},
            ],
            row4tableData2: [
                {age: '男', num: '18610', per: '56.61%'},
                {age: '女', num: '14265', per: '43.39%'},
            ],
            tan1:[],
            tan2:[],
            tan3:[],
            check:[],
            level:[],
            hexin:[],
            risk:[],
            student:[]
        }
    },

    mounted() {
        task_dept_rank({}).then((res)=>{
                this.tan1=res.data
                console.log(this.tan1,'====')
        });
        tan1_table2({}).then((res)=>{
                this.tan2=res.data
                console.log(this.tan2,'111')
        });
        zicha_xuncha({}).then((res)=>{
                this.check=res.data
                console.log(this.check,'222')
        });
        riskLevel({}).then((res)=>{
                this.level=res.data
                console.log(this.level,'333')
        });
        hexin({}).then((res)=>{
                this.hexin=res.data
                console.log(this.hexin,'444')
        });
        risk({}).then((res)=>{
                this.risk=res.data
                console.log(this.risk,'555')
        });
        student({}).then((res)=>{
                this.student=res.data
                console.log(this.student,'666')
        });
        
        // this.$nextTick(()=>{
        //
        // })
        setTimeout(()=>{
            //  this.safeBusinessChart()
            // this.getEcharts();
            // this.getRow2Left();
            // this.getRow2LeftRight();
            this.getRow2Right();
            this.getRow4Left1();
            this.getRow4Left2();
            this.getRow4Right1();
            this.getRow4Right2();
        }, 1000)

    },
    methods: {
        //安全监管企业统计 图表
        safeBusinessChart(){
            tan1_table3({}).then((res)=>{
                this.tan3=res.data
                console.log(res.data,'res.data')
                var chartDom = this.$refs.chart;
            var myChart = this.$echarts.init(chartDom);
            var option;
            option = {
                color: '#1992FF',
                tooltip: {
                    show: true
                },
                xAxis: {
                    type: 'category',
                    // data: ['瞻岐镇', '咸祥镇', '东吴镇', '塘溪镇', '五乡镇', '邱隘镇', '云龙镇','横溪镇','姜山镇','潘火街道','福明街道','东柳街道',
                    // '中河街道','东郊街道','下应街道','明楼街道','百丈街道','东胜街道','白鹤街道','首南街道','钟公庙街道','南部商务区','大嵩新区'],
                    data: res.data.map(e=>e.areaName),
                    axisLabel:{
                        //数据全部展示
                        interval:0,
                        //45度角倾斜
                        // rotate:45,
                    },
                },

                dataZoom: [{
                    type: 'slider',
                    show: true,
                    xAxisIndex: [0],
                    left: '9%',
                    bottom: -23,
                    start: 0,
                    end: 28 //初始化滚动条
                }],
                yAxis: {
                    type: 'value',
                    name: "企业数",
                },
                // 瞻岐镇  297
                // 咸祥镇  388
                // 东吴镇  379
                // 塘溪镇  1075
                // 五乡镇  580
                // 邱隘镇  1150
                // 云龙镇  1156
                // 横溪镇  633
                // 姜山镇  1151
                // 潘火街道  1648
                // 福明街道  1408
                // 东柳街道  1543
                // 中河街道  3155
                // 东郊街道  237
                // 下应街道  769
                // 明楼街道  1232
                // 百丈街道  1551
                // 东胜街道  1173
                // 白鹤街道  847
                // 首南街道  1174
                // 钟公庙街道  1130
                // 南部商务区  827
                // 大嵩新区  143
                series: [
                    {
                        // data: [297, 388, 379, 1075, 580, 1150, 1156,633,1151,1648,1408,1543,3155,237,769,1232,1551,1173,847,1174,1130,827,143],
                        data: res.data.map(e=>e.count),
                        type: 'bar',
                        barWidth: 20,
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true,
                                    position: 'top',
                                    textStyle: {
                                        color: '#1992FF'
                                    }
                                }
                            }
                        },
                    }
                ]
            };
            option && myChart.setOption(option);
            window.onresize = function() {
                myChart.resize();
            };            
            })
        },
        aa(){
            this.card1 = true;
            this.$nextTick(()=>{
                // this.getEcharts()
                this.safeBusinessChart()
            })
        },
        bb(){
            this.card2 = true;
            this.$nextTick(()=>{
                this.getRow2Left()
                this.getRow2LeftRight()
            })
        },
        cc(){
            this.card3 = true;
            this.$nextTick(()=>{
                this.getRow2Right()
            })
        },
        dd(){
            this.card4 = true;
        },
        ee(){
            this.card5 = true;
            this.$nextTick(()=>{
                this.getRow4Left1()
                this.getRow4Left2()
            })
        },
        gotoJS(){
            window.open('https://inspect2.lanchengiot.cn/','_blank')
        },
        
        getEcharts(){
            // var chartDom = document.getElementById('chart');
            var chartDom = this.$refs.chart;
            var myChart = this.$echarts.init(chartDom);
            var option;
            option = {
                color: '#1992FF',
                tooltip: {
                    show: true
                },
                xAxis: {
                    type: 'category',
                    data: ['瞻岐镇', '咸祥镇', '东吴镇', '塘溪镇', '五乡镇', '邱隘镇', '云龙镇','横溪镇','姜山镇','潘火街道','福明街道','东柳街道',
                    '中河街道','东郊街道','下应街道','明楼街道','百丈街道','东胜街道','白鹤街道','首南街道','钟公庙街道','南部商务区','大嵩新区'],
                    axisLabel:{
                        //数据全部展示
                        interval:0,
                        //45度角倾斜
                        // rotate:45,
                    },
                },

                dataZoom: [{
                    type: 'slider',
                    show: true,
                    xAxisIndex: [0],
                    left: '9%',
                    bottom: -23,
                    start: 0,
                    end: 28 //初始化滚动条
                }],
                yAxis: {
                    type: 'value',
                    name: "企业数",
                },
                // 瞻岐镇  297
                // 咸祥镇  388
                // 东吴镇  379
                // 塘溪镇  1075
                // 五乡镇  580
                // 邱隘镇  1150
                // 云龙镇  1156
                // 横溪镇  633
                // 姜山镇  1151
                // 潘火街道  1648
                // 福明街道  1408
                // 东柳街道  1543
                // 中河街道  3155
                // 东郊街道  237
                // 下应街道  769
                // 明楼街道  1232
                // 百丈街道  1551
                // 东胜街道  1173
                // 白鹤街道  847
                // 首南街道  1174
                // 钟公庙街道  1130
                // 南部商务区  827
                // 大嵩新区  143
                series: [
                    {
                        data: [297, 388, 379, 1075, 580, 1150, 1156,633,1151,1648,1408,1543,3155,237,769,1232,1551,1173,847,1174,1130,827,143],
                        type: 'bar',
                        barWidth: 20,
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true,
                                    position: 'top',
                                    textStyle: {
                                        color: '#1992FF'
                                    }
                                }
                            }
                        },
                    }
                ]
            };
            option && myChart.setOption(option);
            window.onresize = function() {
                myChart.resize();
            };
        },
        getRow2Left(){
            var chartDom = document.getElementById('row2Left');
            var myChart = this.$echarts.init(chartDom);
            var option;
            option = {
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    top: '90%',
                    left: 'center',
                    y: 'bottom'
                },
                color:['#42A2FF', '#ccc'],
                series: [
                    {
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        // itemStyle: {
                        //     borderRadius: 10,
                        //     borderColor: '#fff',
                        //     borderWidth: 2
                        // },
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: false,
                                fontSize: '40',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            { value: this.check.checkCount, name: '本月已巡查企业数' },
                            { value: this.check.checkTotal, name: '本月未巡查企业数' },
                        ]
                    }
                ]
            };
            option && myChart.setOption(option);
            window.onresize = function() {
                myChart.resize();
            };
        },
        getRow2LeftRight(){
            var chartDom = document.getElementById('row2LeftRight');
            var myChart = this.$echarts.init(chartDom);
            var option;
            option = {
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    top: '90%',
                    left: 'center',
                    y: 'bottom'
                },
                color:['#3FCBCB', '#ccc'],
                series: [
                    {
                        // name: 'Access From',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        // itemStyle: {
                        //     borderRadius: 10,
                        //     borderColor: '#fff',
                        //     borderWidth: 2
                        // },
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: false,
                                fontSize: '40',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            // { value: 1048, name: 'Search Engine' },
                            { value: this.check.answerCount, name: '本月已自查企业数' },
                            { value: this.check.answerTotal, name: '本月未自查企业数' },
                            // { value: 484, name: 'Union Ads' },
                            // { value: 300, name: 'Video Ads' }
                        ]
                    }
                ]
            };
            option && myChart.setOption(option);
            window.onresize = function() {
                myChart.resize();
            };
        },
        getRow2Right(){
            var chartDom = document.getElementById('row2Right');
            var myChart = this.$echarts.init(chartDom);
            var option;

            option = {
                title: {
                    text: ''
                },
                legend: {
                    data: []
                },
                radar: {
                    // shape: 'circle',
                    indicator: [
                        { name: '消防安全', max: 6000 },
                        { name: '生产安全', max: 6000 },
                        { name: '其他安全',  max: 6000},
                        { name: '食品安全', max: 6000 },
                        { name: '燃气安全',max: 6000 },
                    ]
                },
                series: [
                    {
                        name: 'Budget vs spending',
                        type: 'radar',
                        data: [
                            {
                                value: [5414, 2670, 62, 1053, 525,],
                                // name: 'Allocated Budget'
                            },
                        ]
                    }
                ]
            };

            option && myChart.setOption(option);
            // this.$nextTick(() => {
            //     myChart.resize();
            // });
            window.onresize = function() {
                myChart.resize();
            };
        },
        getRow4Left1(){
            student({}).then((res)=>{
                console.log(res.data.studyOwnerTrend.time.map(e=>e.time),'123')
                var options = {
                chart: {
                    type: 'areaspline'
                },
                title: {
                    text: '学习人数',
                    align: 'left'
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'top',
                    floating: true,
                },
                credits:{
                    enabled: false // 禁用版权信息
                },
                xAxis: {
                    categories: 
                        // '第1周','第2周','第3周','第4周','第5周'
                        res.data.studyOwnerTrend.time
                    ,
                },
                yAxis: {
                    title: {
                        text: ''
                    }
                },
                tooltip: {
                    shared: true,
                    valueSuffix: ' 单位'
                },
                plotOptions: {
                    areaspline: {
                        fillOpacity: 0.5
                    }
                },
                series: [{
                    name: '企业主',
                    data:  res.data.studyOwnerTrend.count
                },
                ]
            };
            // 图表初始化函数
            this.$highcharts.chart('row4Left1', options);
            // this.$highcharts().reflow()
            })
            
        },
        getRow4Left2(){
            var chartDom = document.getElementById('row4Left2');
            var myChart = this.$echarts.init(chartDom);
            var option;

            option = {
                xAxis: {
                    type: 'category',
                    // data: this.student.durationTrend.time.map(function(e){
                    //     return e.split('-',1)
                    // }),
                    data: this.student.durationTrend.time.map(e=>e.split('-')[1]+'/'+e.split('-')[2]),
                    axisLabel:{
                        //数据全部展示
                        interval:0,
                        //45度角倾斜
                        // rotate:45,
                    },
                },
                title: {
                    subtext: '学习时长',
                    subtextStyle: {
                        fontSize: 18,
                        color: '#333'
                    },
                    left: 10,
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: this.student.durationTrend.minutes,
                        type: 'line',
                        itemStyle : {
                            normal : {
                                color:'#F8773C',
                                lineStyle:{
                                    color:'#F8773C'
                                }
                            }
                        },
                    }
                ]
            };

            option && myChart.setOption(option);
            // this.$nextTick(() => {
            //     myChart.resize();
            // });
            window.onresize = function() {
                myChart.resize();
            };
        },
        getRow4Right1(){
            var chartDom = document.getElementById('row4Right1');
            var myChart = this.$echarts.init(chartDom);
            var option;
            option = {
                tooltip: {
                    trigger: 'item',
                    appendToBody: true,
                },
                legend: {
                    // top: '5%',
                    // left: 'center'
                    type: 'plain',
                    // width: 500,
                    // height: 300,
                    orient: 'horizontal',
                    bottom: 10,

                },
                color:['#42A2FF', '#3FCBCB', '#53CB75','#FBD43E','#F2677D','#9762E5'],
                series: [
                    {
                        // name: 'Access From',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: false,
                                fontSize: '40',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            { value: 276, name: '30~39岁' },
                            { value: 166, name: '40~49岁' },
                            { value: 143, name: '50岁以上' },
                            { value: 97, name: '25~29岁' },
                            { value: 75, name: '18~24岁' },
                            { value: 10, name: '17岁以下' }
                        ]
                    }
                ]
            };
            option && myChart.setOption(option);
            window.onresize = function() {
                myChart.resize();
            };
        },
        getRow4Right2(){
            var chartDom = document.getElementById('row4Right2');
            var myChart = this.$echarts.init(chartDom);
            var option;
            option = {
                tooltip: {
                    trigger: 'item',

                },
                legend: {
                    // top: '5%',
                    left: 'center',
                    width: 300,
                    orient: 'horizontal',
                    // top: 170,
                    bottom: 0,
                    // y: 'bottom'
                },
                color:['#42A2FF', '#3FCBCB'],
                series: [
                    {
                        name: '',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: false,
                                fontSize: '40',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            { value: 458, name: '男' },
                            { value: 309, name: '女' },
                        ]
                    }
                ]
            };
            option && myChart.setOption(option);
            window.onresize = function() {
                myChart.resize();
            };
        },
    },
}
</script>

<style lang="less" scoped>

.kk{
   /deep/.el-dialog{
    border-radius: 20px;
} 
}


#index{
    // padding: 20px;
    background: #fff;
    /*width: 100%;*/
    //height: 100vh;
    height: 100%;
    padding-bottom: 100px;
    .row{
        margin-bottom: 20px;
    }
    .box-card{
        box-sizing: border-box;
        height: 100%;
        padding:0 6.2%;
        /deep/.el-card{
            box-shadow: none !important;
            border: none !important;
        }
    }
}

.header{
    position: relative;
    .headTitle{
        position: absolute;
        // width: 1534px;
        height:260px;
        background-color: rgba(0, 145, 255, 0.5);
        top: 345px;
        //盒子居中
        margin: 0 auto;
        left: 0;
        right: 0;
        //文字内容居中
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        
}
}
.box-shuju-row1{
    width:100%;
    background:rgba(22, 147, 255, 0.14);
    padding:8%;
    text-align:center;
    box-sizing:border-box;
    border-radius:8px;
}

/deep/.el-card__header{
    height: 44px;
    padding: 10px 20px;
    background-color: #D6EDFF;
    color: #333333;
}
.box-title{
   
    color: rgba(25, 146, 255, 1);
    font-size:50px;
    text-align: center;
}
.title-img{
    text-align: center;
}
.title-icon{
    position: absolute;
    margin-top: -117px;
}
.link-sp{
    display: flex;
    margin-top:50px;
    margin-left: 151px;
}
.link-word{
    font-size:30px;
    line-height:30px;
    text-decoration:underline;
    color: rgba(25, 146, 255, 1);
    cursor: pointer;
}
.link-icon{
    width:30px;
    height:30px;
}
.box-2-name{
    margin-left:151px;
    margin-right:165px;
    margin-top: 40px;
    font-size:25px;
    font-weight:300;
}
.box-2-content{
    font-size:30px;
    font-weight:500;
    flex-shrink:0;
}
.box-duo-title-small{
    font-size:22px;
    text-align:center;
    line-height:22px;
    margin-top:50px;
    color: #333333;
}
.box-duo-title-pic{
    width:100%;
    height:100%;
    margin-top:50px;
}
.box-duo-card-left{
    width:100%;
    height:102px;
    background-color:rgba(22, 147, 255, 0.14);
    border-radius:8px;
    font-size:21px;
    //垂直居中
    display: flex;
    align-items: center;
    text-align: justify;
    padding-left:40px;
    padding-right:20px;
    box-sizing: border-box;

}
.box-duo-card-right{
    width:100%;
    height:364px;
    background-color:rgba(22, 147, 255, 0.14);
    border-radius:8px;
    font-size:21px;
    //垂直居中
    display: flex;
    align-items: center;
    text-align: justify;
    padding-left:40px;
    padding-right:20px;
    box-sizing: border-box;
}

.box-duo-card-left-font1{
    display: flex;
    position: relative;
    &:after{
        content: "";
        width: 14px;
        height:14px;
        background:#EB7E65;
        border-radius: 50%;
        position:absolute;
        top: 7px;
        left: -20px;
    }
}
.box-duo-card-left-font2{
    display: flex;
    position: relative;
    &:after{
        content: "";
        width: 14px;
        height:14px;
        background:#73A0FA;
        border-radius: 50%;
        position:absolute;
        top: 7px;
        left: -20px;
    }
}
.box-duo-card-left-font3{
    display: flex;
    position: relative;
    &:after{
        content: "";
        width: 14px;
        height:14px;
        background:#F7C739  ;
        border-radius: 50%;
        position:absolute;
        top: 7px;
        left: -20px;
    }
}
.box-duo-card-left-font4{
    display: flex;
    position: relative;
    &:after{
        content: "";
        width: 14px;
        height:14px;
        background:#73DEB3;
        border-radius: 50%;
        position:absolute;
        top: 7px;
        left: -20px;
    }
}
.box-duo-card-left-font5{
    display: flex;
    position: relative;
    &:after{
        content: "";
        width: 14px;
        height:14px;
        background:#3FA6FF;
        border-radius: 50%;
        position:absolute;
        top: 7px;
        left: -20px;
    }
}
.box-duo-card-left-2{
    width:100%;
    height:222px;
    background-color:rgba(22, 147, 255, 0.14);
    border-radius:8px;
}
.box-3-card-tan{
    width:100%;
    cursor: pointer;
}
// .box-3-card-tan :hover{
//     width:102%;
//     height:190px;
//     // height:190px;
// }
.box-3-card{
    // width:105%;
    padding:40px 60px;
    box-sizing:border-box;
    position:relative;
    height:180px;
    cursor: pointer;
}

// .box-3-card :hover{
//     width: 105%;
//     height:105%
// }
.box-3-card-img{
    width:100%;
    position:absolute;
    left:0;
    top:0;
    height:100%;
    border-radius:8px
}
.box-8-tab{
    display: flex;
    align-items: center;
    justify-content: center;
}
.box-8-tab-left{
    width:184px;
    height: 60px;
    border-radius:30px;
    background-color: #1992FF;
    margin-top: 50px;
    line-height:60px;
    font-size:26px;
    text-align: center;
    color: #fff;
}
.box-8-tab-right{
    margin-left:80px;
    background-color:#fff;
    color:#1992FF;
    width:184px;
    height: 60px;
    border-radius:30px;
    margin-top: 50px;
    line-height:60px;
    font-size:26px;
    text-align: center;
    border: 2px solid #1992FF;
}
.box-8-content{
    // width:100%;
    background-color: #1992FF;
    margin-top: 80px;
    padding:80px 135px 80px 150px;
}
.box-8-content1{
    font-size:24px;
    color:#fff;
    
}
.box-8-content2{
    font-size:24px;
    color:#fff;
    margin-top: 40px;
    
}
.box-8-content3{
    font-size:24px;
    color:#fff;
    margin-top: 40px;
    
}
.box-8-link{
    font-size:30px;
    text-decoration:underline;
    font-weight: 400;
    cursor: pointer;
}
.box-9{
    padding:100px 150px;
    // background: url(../assets/image/picbottom@2x.png) no-repeat;
    // background-size: 100% auto;
}

.box-9-left-pic{
    width:680px;
    height:445px;
    float: right;
}
.box-9-center-pic{
    width:31px;
    height:31px;
    position:absolute;
    margin-left:-50px;
    margin-top:5px
}
.box-9-title1{
    font-size:40px;
    line-height:40px;
    
}
.box-9-content1{
    font-size:20px;
    margin-top:24px;
    line-height:32px;
    font-weight: 300;
}
.box-9-title2{
    font-size:40px;
    line-height:40px;
    margin-top: 40px;
    
}
.box-9-content2{
    font-size:20px;
    margin-top:24px;
    line-height:32px;
    font-weight: 300;
}
.bottom-pic{
    position:absolute;
    width:100%;
    bottom:0;
    left:0;
    top: 100%;
}
.bottom{
            display: flex;
            justify-content: space-around;
            .box{
                border: 1px solid #ccc;
                padding: 10px 20px;
                margin: 10px;
                :nth-of-type(1){
                    color: #333333;
                    font-size: 18px;
                }
                :nth-of-type(2){
                    color: #666666;
                    font-size: 14px;
                    margin-top: 20px;
                    margin-bottom: 40px;
                }
            }

}
.text-line{
    text-align: center;
    font-size: 16px;
    color:#333
}
.text-colors{
    color:#1992FF;
    font-size: 20px;
}
.dot{
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
     background-image: linear-gradient(to right, rgba(79, 172, 254, 1) , rgba(79, 172, 254, 0));
}
.top{
    border: 1px solid #1992FF;
    text-align: center;
    margin-bottom: 20px;
    div{
        padding: 10px;
    }
    :nth-of-type(1){
        background-color: #1992FF;
        color: #fff;
    }
     :nth-of-type(3){
        background-color: #D6EDFF;
    }
    :nth-of-type(5){
        background-color: #D6EDFF;
    }
}
.row-two{
    .left{
        .bottom{
            display: flex;
            justify-content: space-around;
            .box{
                border: 1px solid #ccc;
                padding: 10px 20px;
                margin: 10px;
                :nth-of-type(1){
                    color: #333333;
                    font-size: 18px;
                }
                :nth-of-type(2){
                    color: #666666;
                    font-size: 14px;
                    margin-top: 20px;
                    margin-bottom: 40px;
                }
            }

        }
    }
        

    
}
.content{
            //width: calc(100% / 4);
            display: flex;
            padding: 2% 2%;
            .con-left{
                margin-right: 10px;
                div{
                    border: 1px solid #ccc;
                    padding: 20px;
                }
            }
            .con-right{
                width: 100%;
                padding: 0 4%;
            }
        }
.content1{
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width: 350px;
        height: 180px;
        border: 1px solid #ccc;
        padding: 10px;
        margin: 10px;
    }
.row-three{
    .content{
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width: 400px;
        height: 180px;
        border: 1px solid #ccc;
        padding: 10px;
        margin: 10px;
    }
}
.row-four{
    .right-con{
        /deep/.el-table td.el-table__cell{
            border: none;
        }
        ///deep/.el-table th.el-table__cell.is-leaf{
        //    border: none !important;
        //}
        /deep/.el-table .el-table__cell{
            padding: 8px;
        }
        .el-table::before{
            content: '';
            display: none;
        }
    }
}

.down{}
/deep/.el-progress__text{
    display: none;
}
</style>
